<!DOCTYPE html>
<html>
<head th:include="include :: header"></head>
<style type="text/css">
    .file-card-body {
        cursor: pointer;
        padding: 3px 15px;
        border-bottom: 1px solid #e7eaec;
    }

    .layui-icon-file span {
        color: #666;
        font-size: 14px;
        padding-left: 4px;
    }

    .aactive {
        color: #13b5b7 !important;
    }

    .aactive span {
        color: #13b5b7 !important;
    }

    .hactive:hover {
        color: #13b5b7 !important;
    }
</style>
<body>
<div class="layui-fluid layadmin-maillist-fluid">
    <div class="layui-row layui-col-space15" id="app" v-cloak>
        <div class="layui-col-md2">
            <div class="layadmin-homepage-panel layadmin-homepage-shadow">
                <div class="layui-card text-center">
                    <div class="layui-card-body">
                        <button class="layui-btn layui-btn-fluid" id="upload">上传文件</button>
                    </div>
                </div>
                <div class="layui-card-body file-card-body">
                    <a class="layui-icon layui-icon-file hactive" v-on:click="changeType('')" :class="{'aactive':type === ''}"><span class="hactive">所有文件</span></a>
                </div>
                <div class="layui-card-body file-card-body">
                    <a class="layui-icon layui-icon-file hactive" v-on:click="changeType('0')" :class="{'aactive':type === '0'}"><span class="hactive">图片</span></a>
                </div>
                <div class="layui-card-body file-card-body">
                    <a class="layui-icon layui-icon-file hactive" v-on:click="changeType('1')" :class="{'aactive':type === '1'}"><span class="hactive">文档</span></a>
                </div>
                <div class="layui-card-body file-card-body">
                    <a class="layui-icon layui-icon-file hactive" v-on:click="changeType('2')" :class="{'aactive':type === '2'}"><span class="hactive">视频</span></a>
                </div>
                <div class="layui-card-body file-card-body">
                    <a class="layui-icon layui-icon-file hactive" v-on:click="changeType('3')" :class="{'aactive':type === '3'}"><span class="hactive">音乐</span></a>
                </div>
                <div class="layui-card-body file-card-body">
                    <a class="layui-icon layui-icon-file hactive" v-on:click="changeType('4')" :class="{'aactive':type === '4'}"><span class="hactive">其他</span></a>
                </div>
            </div>
        </div>
        <div class="layui-col-md10" v-if="total=='0'">
            <div class="layadmin-homepage-panel">
                <div class="layui-card text-center">
                    <div class="layui-card-body">
                        暂无数据
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md10" id="pictures">
            <div v-if="total!='0'" v-for="(row,index) in rows">
                <div class="layui-col-md3 layui-col-sm6" style="padding:7px;">
                    <div class="cmdlist-container" style="text-align:center;">
                        <a style="cursor:pointer;">
                            <img :src="row.iconUrl" style="width:auto;max-width:100%;height:160px;">
                        </a>
                        <a>
                            <div class="cmdlist-text" style="padding: 10px 20px;">
                                <p style="text-align:center;padding-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{row.fileName}}</p>
                                <p style="text-align:center;padding-bottom:5px;">{{row.createDate}}</p>
                                <div class="price" style="text-align: center;">
                                    <button class="layui-btn layui-btn-xs copy" :url="row.fileUrl">复制</button>
                                    <button class="layui-btn layui-btn-xs layui-btn-normal" v-on:click="download(row.fileUrl)">下载</button>
                                    <button class="layui-btn layui-btn-xs layui-btn-danger" v-on:click="remove(row.id)">删除</button>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
                <div style="clear:both;" v-if="index==3 || index==7"></div>
            </div>
            <div style="clear:both;"></div>
            <div id="LAY-template-search-page" style="text-align:center;" v-show="total!='0'"></div>
        </div>
    </div>
</div>
<div th:include="include :: footer"></div>
<script type="text/javascript" th:src='@{/custom/vue.min.js}'></script>
<script th:inline="javascript">
    var prefix = [[${prefix}]];
    layui.config({
        base: ctx + '/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index', //主入口模块
        clipboard: 'clipboard',
        viewer: 'viewer'
    }).use(['index', 'upload', 'clipboard', 'viewer'], function () {
        var upload = layui.upload;

        var app = new Vue({
            el: '#app',
            data: {
                pageNumber: 1,
                pageSize: 12,
                total: 0,
                type: '',
                rows: '',
                viewer: ''
            },
            methods: {
                getData: function () {
                    commonJs.openAjax(ctx + "/manage/file/file/list", {
                        pageSize: this.pageSize,
                        pageNumber: this.pageNumber,
                        fileType: this.type
                    }, function (r) {
                        if (r.data.length > 0) {
                            for (var i = 0; i < r.data.length; i++) {
                                r.data[i].fileUrl = ctx + r.data[i].fileUrl;
                                if (r.data[i].fileType === '1') {
                                    r.data[i].iconUrl = ctx + '/custom/images/document.png';
                                } else if (r.data[i].fileType === '2') {
                                    r.data[i].iconUrl = ctx + '/custom/images/video.png';
                                } else if (r.data[i].fileType === '3') {
                                    r.data[i].iconUrl = ctx + '/custom/images/music.png';
                                } else if (r.data[i].fileType === '4') {
                                    r.data[i].iconUrl = ctx + '/custom/images/file.png';
                                } else {
                                    r.data[i].iconUrl = r.data[i].fileUrl;
                                }
                            }
                        }
                        app.total = r.count;
                        app.rows = r.data;
                        app.page();
                    }, null, true, 'get');
                },
                page: function () {
                    layui.use('laypage', function () {
                        layui.laypage.render({
                            elem: 'LAY-template-search-page',
                            count: app.total,
                            limit: app.pageSize,
                            curr: app.pageNumber,
                            jump: function (obj, first) {
                                if (!first) {
                                    app.pageNumber = obj.curr;
                                    app.getData();
                                }
                            }
                        });
                    });
                },
                remove: function (id) {
                    commonJs.openConfirm('确定删除吗？', function () {
                        commonJs.openAjax(ctx + "/manage/file/file/remove", {"id": id}, function (result) {
                            if (result.code == 0) {
                                commonJs.openMsg('success', '删除成功！');
                                app.getData();
                            } else {
                                commonJs.openMsg('error', result.msg);
                                app.getData();
                            }
                        });
                    });
                },
                download: function (url) {
                    commonJs.downloadFile(url);
                },
                changeType: function (i) {
                    this.type = i;
                    this.pageNumber = 1;
                    this.getData();
                }
            },
            created: function () {
                this.changeType('');
                new Clipboard('button.copy', {
                    text: function (trigger) {
                        commonJs.openMsg('success', '文件路径已复制到粘贴板！');
                        return prefix + $(trigger).attr('url');
                    }
                });
            },
            watch: {
                rows: function () {
                    this.$nextTick(function () {
                        if (app.viewer != '') {
                            app.viewer.destroy();
                        }
                        app.viewer = new Viewer(document.getElementById('pictures'), {
                            url: 'url'
                        });
                    });
                }
            },
            mounted: function () {
                //执行实例
                upload.render({
                    elem: '#upload', //绑定元素
                    url: ctx + '/manage/file/file/upload', //上传接口
                    accept: 'file',
                    done: function (result) {
                        commonJs.openMsg('success', result.msg);
                        app.getData();
                    },
                    error: function (result) {
                        commonJs.openMsg('error', result.msg);
                    }
                });
            }
        });
    });
</script>
</body>
</html>